<template>
	<view :class="[primarySize()]">
		<view class="page-head">
			<view class="tab flex-box">
				<view class="flex-grow-1" :class="[tabIdx == -1 ? 'active' : '']" @click="tabClick(-1)">全部</view>
				<view class="flex-grow-1" :class="[tabIdx == 1 ? 'active' : '']" @click="tabClick(1)">待支付</view>
				<view class="flex-grow-1" :class="[tabIdx == 2 ? 'active' : '']" @click="tabClick(2)">已完成</view>
				<view class="flex-grow-1" :class="[tabIdx == 0 ? 'active' : '']" @click="tabClick(0)">已取消</view>
			</view>
		</view>
		<view class="container">
			<view class="pt30">
				<view class="taocan-item" v-for="(item,index) in packageOrderList" :key="index" @click="orderDetail(index)">
					<view class="flex-box mb30">
						<view class="order-num flex-grow-1">订单号 {{item.order_no}}</view>
						<view class="fs30" :class="[item.pay_status==1?'status1' : 'status2']">{{item.pay_status_text}}</view>
					</view>
					<view class="flex-box mb30">
						<view class="title flex-grow-1">{{item.package_name}}</view>
						<view class="order-num">{{formatDatetime(item.updatetime,'mm.dd hh:ii')}}</view>
					</view>
					<view class="flex-box tc data mb30">
						<view class="flex-grow-1">
							<view class="fs34 mb15">{{item.job_publish_num}}</view>
							<view class="fs24 key">发布职位</view>
						</view>
						<view class="flex-grow-1">
							<view class="fs34 mb15">{{item.resume_view_num}}</view>
							<view class="fs24 key">查看简历</view>
						</view>
						<view class="flex-grow-1">
							<view class="fs34 mb15">{{item.interview_num}}</view>
							<view class="fs24 key">邀请面试</view>
						</view>
						<view class="flex-grow-1">
							<view class="fs34 mb15">{{item.job_refresh_num}}</view>
							<view class="fs24 key">刷新职位</view>
						</view>
					</view>
					<view class="flex-box">
						<view class="price flex-grow-1">
							<text class="fs24 col5">合计</text>
							<text class="fs22">¥</text>
							<text class="fs34">{{item.pay_price}}</text>
						</view>
						<view v-if="item.pay_status == 1" @click.stop="orderCancel(index)"
							class="foot-btn1">取消订单</view>
						<view v-if="item.pay_status == 1" @click.stop="choosePackageOrder(index)"
							class="foot-btn2">立即支付</view>
					</view>
				</view>
				
				<view class="mlr30">
					<view class="nothing" v-if="packageOrderListMore.nothing">
						<image src="@/static/public/icon_nothing.png" mode="aspectFill"></image>
						<view><text>暂无相关订单信息</text></view>
					</view>
					<button @click="fetchPackageOrderList" v-else hover-class="none"
						class="more_btn mt30 mb30">{{packageOrderListMore.text}}</button>
				</view>
			</view>
			
		</view>
		<view class="zz" v-if="showPop" @click="togglePop"></view>
		<view class="pay-pop" v-if="showPop">
			<view class="fs34 mb30 tc">确认支付</view>
			<view class="flex-box mb30">
				<view class="flex-grow-1 fs30 col5">套餐名称</view>
				<view class="fs34">{{packageOrderList[packageOrderIndex].package_name}}</view>
			</view>
			<view class="flex-box mb40">
				<view class="flex-grow-1 fs30 col5">支付金额</view>
				<view class="price">
					<text class="fs22">¥</text>
					<text class="fs34">{{packageOrderList[packageOrderIndex].pay_price}}</text>
				</view>
			</view>
			<view class="fs36 tc mb40">- 支付方式 -</view>
			<view class="pay-item" @click="payClick(1)">
				<view class="flex-box">
					<image class="icon1" src="@/static/public/z_icon1.png" mode="aspectFit"></image>
					<view class="fs30 flex-grow-1">线上支付</view>
					<image class="icon2" :src="iconPath(payIdx==1?'choose_sc.png':'choose_uc.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="pay-item" @click="payClick(3)">
				<view class="flex-box">
					<image class="icon1" src="@/static/public/z_icon2.png" mode="aspectFit"></image>
					<view class="fs30 flex-grow-1">线下支付</view>
					<image class="icon2" :src="iconPath(payIdx==3?'choose_sc.png':'choose_uc.png')" mode="widthFix"></image>
				</view>
				<view class="info-box" v-if="payIdx == 3">
					<view class="fs30 mb30">收款信息</view>
					<view class="flex-box mb40">
						<view class="flex-grow-1">公司名称</view>
						<view>{{config.corporate_company}}</view>
					</view>
					<view class="flex-box mb40">
						<view class="flex-grow-1">开户行</view>
						<view>{{config.open_bank}}</view>
					</view>
					<view class="flex-box">
						<view class="flex-grow-1">开户账号</view>
						<view>{{config.corporate_account}}</view>
					</view>
				</view>
			</view>

			<view class="btn3 tc" @click="onsubmit">确认支付</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				packageOrderList: [],
				packageOrderListMore: {
					page: 1
				},
				packageOrderIndex: 0,
				tabIdx: -1,
				payIdx: 1,
				config: {},
				showPop: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			
			let page = this;
			this.$core.get({
				url: '/xilujob.common/corporate',
				loading: false,
				success(ret, data) {
					page.config= ret.data
				}
			});
			this.fetchPackageOrderList();
		},
		methods: {
			togglePop() {
				this.showPop= !this.showPop
			},
			payClick(i) {
				this.payIdx= i
				
			},
			tabClick(index) {
				this.tabIdx = index

				this.refresh();
			},

			choosePackageOrder(i) {
				let packageOrderIndex = i;
				this.packageOrderIndex=packageOrderIndex
					this.payIdx= this.packageOrderList[packageOrderIndex].pay_type
					this.showPop= !this.showPop
				
			},

			refresh() {
				this.packageOrderList= []
					this.packageOrderListMore= {page: 1}
				this.fetchPackageOrderList();
			},

			//列表
			fetchPackageOrderList() {
				this.$util.fetch(this, 'xilujob.package_order/lists', {
					state: this.tabIdx
				}, 'packageOrderListMore', 'packageOrderList', 'data', list => {

				});
			},
			orderDetail(i) {
				let index = i;
				let order = this.packageOrderList[index];
				uni.navigateTo({
					url: '/pages/company/order_detail?order_id=' + order.id,
				})
			},
			/**
			 * 订单取消
			 */
			orderCancel(i) {
				let page = this;
				let index = i;
				let order = this.packageOrderList[index];
				uni.showModal({
					title: '提示',
					content: '是否取消支付？',
					success: res => {
						if (res.confirm) {
							page.$core.post({
								url: '/xilujob.package_order/cancel',
								data: {
									package_order_id: order.id
								},
								success: ret => {
									page.refresh();
								}
							});
						}
					}
				})

			},

			/**
			 * 套餐购买
			 */
			onsubmit() {
				let packageOrderIndex = this.packageOrderIndex;
				let packageOrder = this.packageOrderList[packageOrderIndex];
				let package_order_id = packageOrder.id;
				let config = this.config;
				let pay_type = this.payIdx;
				let data = {
					platform: 'wxmini',
					order_id: package_order_id,
					pay_type: pay_type,
					corporate_company: config.corporate_company,
					open_bank: config.open_bank,
					corporate_account: config.corporate_account,
					//remarks:remarks
				}
				let page = this;
				if (pay_type == 1) {
					uni.login({
						success(wxRes) {
							let code = wxRes.code;
							page.$core.post({
								url: '/xilujob.user/wxlogin',
								data: {
									code: code
								},
								success: (ret, response) => {
									data['third_id'] = ret.data.third.third_id;
									page.payment(data);
								},
								fail: (ret, response) => {
									uni.showToast({
										title: '下单失败',
										icon: 'none'
									})
								}
							});
						},
					});
				} else {
					page.payment(data);
				}
			},
			payment(order) {
				let page = this;
				this.$core.post({
					url: '/xilujob.pay/pay',
					data: order,
					loading: true,
					success(ret, data) {
						if (order.pay_type == 1) {
							//发起支付
							uni.requestPayment({
								'timeStamp': ret.data.timeStamp,
								'nonceStr': ret.data.nonceStr,
								'package': ret.data.package,
								'signType': ret.data.signType,
								'paySign': ret.data.paySign,
								'success': function(res) {
									uni.showToast({
										icon: "none",
										title: '支付成功',
									})
									page.togglePop();
									page.fetchCompany();
								},
								'fail': function(res) {
									uni.showToast({
										icon: "none",
										title: '支付失败',
									})
								},
								'complete': function(res) {

								}
							});
						} else {
							uni.showToast({
								title: ret.msg,
								icon: 'none'
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 88rpx 30rpx 30rpx;
	}

	.tab {
		height: 88rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		background-color: var(--primary);
	}

	.tab .active {
		font-weight: bold;
		font-size: 26rpx;
		color: #FFFFFF;
		position: relative;
		&::after {
			content: '';
			width: 36rpx;
			height: 6rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.taocan-item {
		margin: 0 0 30rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx 0 rgba(183, 189, 202, 0.2);
		border-radius: 10rpx;
		border: 1rpx solid #EEEEEE;
		background: #FFF;
	}

	.taocan-item .title {
		font-size: 34rpx;
		font-weight: 500;
		color: #101010;
		line-height: 36rpx;
	}

	.taocan-item .price {
		color: #FE3846;
	}

	.taocan-item .key {
		color: #898989;
	}

	.taocan-item .order-num {
		font-size: 28rpx;
		color: #555555;
		line-height: 30rpx;
	}

	.taocan-item .data {
		width: 630rpx;
		height: 150rpx;
		background: #F7F9FC;
		border-radius: 10rpx;
	}

	.taocan-item .icon-pay {
		margin: 0 10rpx 0 0;
		display: block;
		width: 35rpx;
		height: 35rpx;
	}

	.taocan-item .status1 {
		color: #FE3846;
	}

	.taocan-item .status2 {
		color: #101010;
	}

	.taocan-item .status3 {
		color: #555555;
	}

	.taocan-item .foot-btn1 {
		margin: 0 0 0 30rpx;
		width: 140rpx;
		height: 65rpx;
		border-radius: 5rpx;
		border: 1rpx solid #CCCCCC;
		font-size: 24rpx;
		color: #555555;
		line-height: 65rpx;
		text-align: center;
	}

	.taocan-item .foot-btn2 {
		margin: 0 0 0 30rpx;
		width: 140rpx;
		height: 65rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		color: #FFF;
		line-height: 65rpx;
		text-align: center;
		background:var(--primary);
	}

	.zz {
		z-index: 100;
	}

	.pay-pop {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx 30rpx;
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 5rpx 5rpx;
		z-index: 101;
		box-sizing: border-box;
	}

	.pay-pop .price {
		color: #FF7102;
	}

	.pay-pop .pay-item {
		margin: 0 0 30rpx;
		padding: 36rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0 4rpx 20rpx 0 rgba(183, 189, 202, 0.2);
		border-radius: 10rpx;
		border: 1rpx solid #EEEEEE;
	}

	.pay-pop .icon1 {
		margin: 0 15rpx 0 0;
		display: block;
		width: 35rpx;
		height: 35rpx;
	}

	.pay-pop .icon2 {
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.pay-pop .btn3 {
		border-radius: 8rpx;
	}

	.pay-pop .info-box {
		margin-top: 30rpx;
		padding: 30rpx;
		background: #F7F9FC;
		border-radius: 10rpx;
	}
	.btn3{font-size: 32rpx;color: #fff;background-color: var(--primary);width: 100%;line-height: 95rpx;height: 95rpx;}
</style>